<template>
  <div class="dog">
    <kennel
      :navList="navList"
      :navClass="'d-nav-bar-black'"
      :navActiveId="navActiveId"
      :isShowFooter="isShowFooter"
      :isLogin="isLogin"
      @login="handleLogin"
      @logout="handleLogout"
      ref="kennel">
      <template v-slot:header-side>
        <div class="d-header-side">
          <a class="d-text-link header-logo" :href="getMicroPath('#/')">
            <img class="d-img logo-image" src="../../../assets/images/dog-logo-sm.png" />
            <span :title="appName" class="logo-text">{{ appName }}</span>
          </a>
        </div>
      </template>
      <template v-slot:header-menu>
        <div class="d-header-menu"></div>
      </template>
      <template v-slot:layout-body>
        <div class="design-body d-layout-body d-bg-fog">
          <div class="design-render">
            <router-view />
          </div>
        </div>
      </template>
    </kennel>
    <Login />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Kennel } from '@daelui/vdog/dist/pages.js'
import Login from '@/components/login/login.vue'
import ds from '@/service/components/ds'
import ebus from '@/components/ebus'

export default {
  name: 'mapp',

  components: {
    Login,
    Kennel
  },

  props: {
    appName: {
      default: '微应用'
    },
    navList: {
      type: Array,
      default: []
    }
  },

  computed: mapState({
    // 选中的导航id
    navActiveId: state => state.navActiveId
  }),

  watch: {
    '$route': function() {
      this.syncState()
    }
  },

  data () {
    return {
      // 是否显示底部
      isShowFooter: false,
      // 是否登录
      isLogin: false
    }
  },

  created () {
    ds.$on('onAfterRequest', (result) => {
      let options = result.options
      if (
        result && result.response &&
        String(result.response.status) === '403'
      ) {
        // 弹出窗口
        ebus.$emit('onShowLogin')
        // 登录超时
        ebus.$emit('onLoginExpire')
      } else if (
        result && result.response &&
        String(result.response.status) === '401'
      ) {
        // 弹出窗口
        this.$message({
          message: '暂无权限进行此操作',
          type: 'error',
          showClose: true
        })
      } else {
        if (options.isShowError !== false) {

        }
      }
    })
  },

  beforeMount () {
    // 标题设置
    if (this.appName) {
      document.title = this.appName
    }
  },

  mounted () {
    // 隐藏加载条
    let lm = document.querySelector('.d-loading-maker')
    if (lm) {
      lm.style.display = 'none'
    }
    // 初始化
    this.initView()
  },

  methods: {
    initView () {
      let rpath = location.hash.replace('#', '').replace(/\?.*/, '') || '/' // this.$route.path
      let defaultNav = this.navList.find(item => {
        return item.path === rpath
      })
      // 初始化的路由地址未与菜单匹配时
      if (!defaultNav) {
        defaultNav = this.navList.find(item => item.isDefault)
        if (!defaultNav) {
          defaultNav = this.navList[0]
        }
        if (defaultNav) {
          this.$router.push(defaultNav.path)
        }
      }
    },
    // 同步状态
    syncState () {
      let rpath = this.$route.path
      let node = this.navList.find(item => {
        return item.path === rpath
      })
      // 动态标题
      if (node && node.name) {
        document.title = node.name
      }
    }
  }
}
</script>

<style lang="less">
body {
  margin: 0;
  padding: 0;
}
@media(max-width: 756px) {
  ::-webkit-scrollbar {
    display: none!important;
    width: 0px;  
    height: 0px;  
  }
}
.d-header-container {
  justify-content: space-between;
}
.layout-body-page {
  & > .d-layout-content {
    margin: 0 auto;
    // max-width: 1200px;
  }
}
.d-layout-header {
  position: relative;
  z-index: 5;
  .header-logo {
    .logo-text {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.layout-content {
  min-height: calc(100vh - 48px - 32px - 38px - 8px - 16px);
}
.design-render {
  width: 100%;
}
.d-table-tr {
  .d-grid-actions {
    .d-text-theme {
      color: #999;
    }
  }
  &:hover {
    .d-grid-actions {
      .d-text-theme {
        color: #3391ff;
      }
    }
  }
}
.d-layout-content {
  & > .d-contenter {
    display: flex;
    min-height: 100%;
    .paner-list {
      display: flex;
      flex-direction: column;
      flex: 1;
      & > .d-paner-table {
        flex: 1;
        & > .d-paner-body {
          flex: 1;
        }
      }
    }
    & > .d-paner {
      flex: 1;
    }
  }
}
.d-layout-content .d-contenter {
  .d-box-building {
    margin-top: 64px
  }
}
@media (max-width: 1380px) {
  .d-nav-bar {
    flex: 1;
  }
  .navbar-toggle {
    display: block !important;
  }
  .nav-bar-group {
    display: none;
  }
}
</style>
